<template>
    <div class="login-wrap">
        <div class="head">
            <div class="head-content">
                <div @click="replace('/')" class="logo" :style="{backgroundImage: 'url(' +configObj.logo+ ')'}"></div>
                <div class="kf" v-if="configObj.tel">
                    <div class="kf-content"><span>客服电话</span></div>
                    <div class="kf-tel"><span>{{configObj.tel}}</span></div>
                </div>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap-content">
                <div class="login-content">
                    <div class="title">
                        <div @click="login" class="name">登录</div>
                    </div>
                    <el-form :model="information" :rules="rules" ref="information">
                        <el-form-item prop="account">
                            <div class="input-list">
                                <el-input
                                placeholder="账号"
                                v-model="information.account"
                                clearable>
                                </el-input>
                            </div>   
                        </el-form-item>
                        <el-form-item prop="password">
                            <div class="input-list">
                                <el-input
                                placeholder="密码"
                                v-model="information.password"
                                type="password"
                                clearable>
                                </el-input>
                            </div>    
                        </el-form-item>
                        <el-form-item prop="randomCode">
                            <div class="input-list code">
                                <el-input
                                placeholder="验证码"
                                v-model="information.randomCode"
                                clearable>
                                </el-input>
                                <div @click="getCode" class="code-btn"><img :src="codeImg" alt=""></div>
                            </div>   
                        </el-form-item>
                        <div  @click="login('information')" class="btn">登录</div> 
                    </el-form>  
                    <div class="link-wrap">
                        <div @click="replace('forget')" class="forget">忘记密码</div>
                        <div @click="replace('register')" class="register">免费注册</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="tip">
                <p>地址：{{configObj.address}}</p>
                <p>版权所有：{{configObj.desc}}</p>
            </div>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js'),
    config = require('../../config/config.js')
export default {
    data() {
        return {
            configObj:'',
            information:{
                account:'',
                password:'',
                randomCode:'',
                token:''
            },
            rules: {
                account:[
                    {required: true, message: '请输入账号', trigger: 'change'  }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
                ],
                randomCode:[
                    {required: true, message: '请输入验证码', trigger: 'change'  }
                ],
            },
            codeImg:''
        }
    },
    components: {
  
    },  
    created() {
        let arr = location.hostname.split('.');
let urlName = arr[0] == 'www'?arr[1]:arr[0];
        this.configObj = config.urlObjs[urlName]
    },
    mounted(){
        this.getCode()
    },
    methods:{
        login(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = CONSTANT.URL.WEB.LOGIN;
                    let data = {
                            account:this.information.account,
                            password:this.information.password,
                            randomCode:this.information.randomCode,
                            token:this.information.token
                    },
                    dataForm = { }
                    common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                message: '登陆成功！',
                                type: 'success'
                            });
                            common.setCookie('sessionId',res.data.bussData.sessionId)
                            common.setCookie('nickname',res.data.bussData.nickname)
                            common.setCookie('userType',res.data.bussData.userType)
                            this.$router.replace('/')
                        }else{
                             this.$message.error(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            });
            
        },
        getCode(){
            let url = CONSTANT.URL.BASE.RANDOMCODE;
            let data = {},
            dataForm = { }
            common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.codeImg = res.data.bussData.codeUrl
                    this.information.token = res.data.bussData.token
                }else{
                   
                }
            })
        },
        replace(link){
            this.$router.replace(link)
        }
    }
}
</script>

<style lang="scss">
    .login-wrap{
        .head{
            @media screen and (max-width: 1440px) {
                height: 100px;            
                line-height: 100px;
                .head-content {
                    .logo {
                        top: 12px !important;
                    }
                    .kf {
                        height: 100px !important;
                        .kf-content {
                            margin-top: 30px !important;
                        }
                    }
                }
            }
            @media screen and (min-width: 1441px) and (max-width: 1600px) {
                height: 138px;            
                line-height: 138px;
            }
            position: relative;
            background-color: #F5F5F5;
            width: 100%;
            .head-content {
                position: relative;
                width: 1200px;
                margin: 0 auto;
                .logo{
                    float: left;
                    cursor:pointer;
                    position: relative;
                    top: 31px;
                    width: 313px;
                    height: 76px;
                    color: #fff;
                    background-size: 100%;
                }
                .kf {
                    position: relative;
                    right: 0px;
                    width: 200px;
                    height: 138px;
                    float: right;
                    text-align: right;
                    .kf-content {
                        color: #666666;
                        font-size: 18px;
                        line-height: 18px;
                        margin-top: 38px;
                    }
                    .kf-tel {
                        color: #ED7018;
                        font-size: 24px;
                        line-height: 24px;
                        margin-top: 8px;
                    }
                }
            }
        }
        .el-form-item{
            margin-bottom: 0!important;
            .el-form-item__content{
                margin-left: 0!important;
            }
        }
        .wrap{
            position: relative;
            background: url(../../images/bg.png)  no-repeat ;
            background-size: 100% 100%;
            @media screen and (max-width: 1440px) {
                height: 500px;
                .login-content {
                    top: 50px !important;
                    width: 300px !important;
                    height: 420px !important;
                }
                .wrap-content {
                    height: 500px !important;
                }
            }
            @media screen and (min-width: 1441px) and (max-width: 1600px) {
                height: 770px;
            }
            .wrap-content{
                position: relative;
                width: 1200px;
                margin: 0 auto;
                height: 770px;
            }
            .login-content{
                padding: 0 30px;
                position: absolute;
                top: 172px;
                right: 0px;
                width: 300px;
                height: 454px;
                background-color: #fff;
                border: 1px solid #e1e1e1;
                .title{
                    border-bottom: 1px solid #E1E1E1;
                    margin-top: 11px;
                    .name{
                        height: 54px;
                        line-height: 54px;
                        width: 200px;
                        text-align: center;
                        color: #ED7018;
                        font-size: 19px;
                        border-bottom: 2px solid #ED7018;
                        margin: 0 auto;
                    }
                }
                .input-list{
                    margin-top: 30px;
                    .el-input{
                        input{
                            /*width: 313px;*/
                            height: 42px;
                            font-size: 14px;
                        }
                    }
                    .el-input__inner{
                        border: 1px solid #e1e1e1;
                        height: 42px;
                        font-size: 18px;
                        border-radius: 2px;
                        -webkit-border-radius: 2px;
                        line-height: 42px;
                    }
                    &.code{
                        position: relative;
                        width: 313px;
                        .el-input__inner{
                             width: 190px;
                        }
                        .code-btn{
                            cursor:pointer;
                            position: absolute;
                            right: 0;
                            top: 0;
                            width: 108px;
                            height: 42px;
                            line-height: 54px;
                            text-align: center;
                            box-sizing: border-box;
                            border-radius: 2px;
                            -webkit-border-radius: 2px;
                            img{
                                border-radius: 2px;
                                -webkit-border-radius: 2px;
                                width: 108px;
                                height: 42px;
                            }
                        }
                    }
                }
                .btn{
                    width: 313px;
                    height: 42px;
                    line-height: 42px;
                    text-align: center;
                    color: #fff;
                    font-size: 24px;
                    border-radius: 2px;
                    -webkit-border-radius: 2px;
                    margin-top: 30px;
                    background-color: #ED7018;
                    font-size: 14px;
                    cursor: pointer;
                    &:hover{
                        background-color: #ED9000;
                        transition:all .2s linear
                    }
                }
                .link-wrap{
                    overflow: hidden;
                    margin-top: 23px;
                    font-size: 14px;
                    color: #999;
                    .forget{
                        float: left;
                        cursor: pointer;
                    }
                    .register{
                        color: #ED7018;
                        float: right;
                        cursor: pointer;
                    }
                }
            }
        }
        .footer{
            height: 169px;
            width: 100%;
            background-color: #f5f5f5;
            @media screen and (max-width: 1440px) {
                height: 130px !important;
                padding-top: 0px;
                .tip {
                    padding-top: 10px !important;
                    padding-left: 80px !important;
                }
            }
            @media screen and (min-width: 1441px) and (max-width: 1600px) {
            }
            .tip{
                font-size: 14px;
                color: #999;
                padding-top: 43px;
                padding-left: 18.6979%;
            }
        }
    }
</style>
